<template>
  <div class="hello">
    <div class="header">
      <div class="header-bj">
        <img src="../../static/bj.png" alt />
      </div>
      <div class="login-footer">
        <div class="footer-1">
          <img src="../../static/footer-1.png" alt />
        </div>
        <div class="footer-2">
          <img src="../../static/footer-2.png" alt />
        </div>
      </div>
      <div class="login">
        <div class="login-top">
          <div class="top-1">
            <img src="../../static/logo.png" alt />
          </div>
          <div class="top-2">
            <div class="left">
              <img src="../../static/hbs.png" alt />
            </div>
            <div class="top-3">
              <div class="top-input">
                <p class="top-img">
                  <img src="../../static/input.png" alt />
                  <el-input v-model="username" placeholder="请输入账号"></el-input>
                </p>
                <p class="top-img">
                  <img src="../../static/input1.png" alt />
                  <el-input
                    placeholder="请输入密码"
                    v-model="password"
                    show-password
                    @keyup.enter.native="submitForm('ruleForm')"
                  ></el-input>
                </p>
                <p class="top-img-1">
                  <input name="Fruit" type="checkbox" v-model="checked" />
                  <span class="hg">记住密码</span>
                </p>
              </div>
              <div class="login-dl">
                <input type="button" value="登录" @click="submitForm('ruleForm')" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var pd = "";
export default {
  name: "HelloWorld",
  data() {
    return {
      message: "登录",
      pd: "",
      type: "",
      username: "关悦1",
      password: "123456",
      checked: false
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
      const self = this;
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (self.checked == true) {
        console.log("checked == true");
        //传入账号名，密码，和保存天数3个参数
        self.setCookie(self.username, self.password, 7);
      } else {
        console.log("清空Cookie");
        //清空Cookie
        self.clearCookie();
      }

      //与后端请求代码
      this.$axios
        .post("http://2924c72s24.wicp.vip:14018/httpapi/login/", {
          username: this.username,
          password: this.password
        })
        .then(res => {
          console.log(res);
          this.pd = res.data.message;
          if (res.data.message == "登录失败") {
            this.$message({
              showClose: true,
              message: "账号或密码错误",
              type: "success"
            });
          } else if (res.data.message == "登录成功") {
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success"
            });
            this.$router.push("/shouye");
            this.savecookie(res);
          }
        })
        .catch(error => {
          console.log(error);
        });

      console.log("登陆成功");
    },
    /**保存登录信息 */
    savecookie(res) {
      let token = res.data.rows;
      let userid = res.data.userid;
      let gongzuodanweiid = res.data.gongzuodanweiid; //工作单位代码
      let gongzuodanweimingcheng = res.data.gongzuodanweimingcheng; //工作单位名称
      let jinghao = res.data.jinghao; //警号
      let jieshoudanweidaima = res.data.jieshoudanweidaima; //工作单位编号

      this.$cookies.set("token", token, 24 * 60 * 60);
      this.$cookies.set("userid", userid, 24 * 60 * 60);
      this.$cookies.set("gongzuodanweiid", gongzuodanweiid, 24 * 60 * 60);
      this.$cookies.set(
        "gongzuodanweimingcheng",
        gongzuodanweimingcheng,
        24 * 60 * 60
      );
      this.$cookies.set("jinghao", jinghao, 24 * 60 * 60);
      this.$cookies.set("jieshoudanweidaima", jieshoudanweidaima, 24 * 60 * 60);
      this.$cookies.set("token", token, 24 * 60 * 60);
      this.$cookies.set("token", token, 24 * 60 * 60);

      console.log('cookie', this.$cookies.keys()) ;
    },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.hello {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.header-bj img {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.login {
  width: 50%;
  margin: auto;
  position: relative;
}
.login-top {
  display: flex;
}
.top-1 {
  width: 50%;
  text-align: left;
}
.top-2 {
  width: 50%;
}
.top-1 img {
  width: 240px;
  height: 320px;
  padding-top: 20px;
}
.top-3 {
  background: #8eacf2;
  opacity: 0.9;
  padding: 20px 0;
  width: 230px;
  height: 200px;
  margin: auto;
}
.top-input p {
  width: 200px;
  margin: -10px auto;
}
.top-img img {
  width: 14px;
  position: relative;
  top: 32px;
  left: -83px;
  z-index: 1;
  right: -1px;
}
/deep/ .el-input__inner {
  font-size: 12px;
  padding-left: 30px !important;
}

.top-img-1 {
  padding-top: 20px;
  text-align: right;
  font-size: 13px;
  height: 20px;
}
.login-dl {
  margin-top: 30px;
}
.login-dl input {
  width: 200px;
  padding: 8px 0;
  background: linear-gradient(#2d7cf3, #2a60dd);
  border: 0;
  border-radius: 2px;
  color: white;
  cursor: pointer;
}
.login {
  width: 600px;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.login-footer {
  display: flex;
  position: absolute;
  bottom: 26px;
  width: 50%;
  margin: auto;
  text-align: center;
  left: 30%;
}
.footer-1 {
  width: 50%;
  text-align: left;
}
.footer-1 img {
  width: 40%;
}
.footer-2 {
  width: 40%;
}
.footer-2 img {
  width: 80%;
  text-align: right;
}
.left img {
  width: 100%;
  margin-bottom: 10px;
}
</style>
